<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加商品类别</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/javascript.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/httpVueLoader.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="categoryAddApp">
	<top-manage></top-manage>
	<div id="middle">
		<div id="position">
			您现在的位置是&nbsp;&gt;&nbsp;<a href="index-manage.html">管理后台</a>&nbsp;&gt;&nbsp;商品类别管理
		</div>
		<product-manage></product-manage>
		<div id="main">
			<div id="login">
				<h1>添加商品类别</h1>
				<table>
					<tr>
						<td align="right">父类别：</td>
						<td>
							<select v-model="category.parent">
								<option :value="0">---无父类别---</option>
								<option v-for="(parent,index) in categoryParentList" :value="parent.id" v-text="parent.name"></option>
							</select>
						</td>
						<td></td>
					</tr>
					<tr>
						<td align="right">类别名称：</td>
						<td><input type="text" size="30" placeholder="请输入商品类别名称" v-model="category.name"/></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" value="添加商品类别" class="button" @click="addCategory()"/></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<bottom></bottom>
</div>
<script type="text/javascript">
	Vue.use(httpVueLoader);
	const app = new Vue({
		el: "#categoryAddApp",
		data: {
			categoryParentList: [],
			category:{
				id: "",
				name:"",
				parent: "",
			},
		},
		created() {
			this.loadData();
		},
		methods: {
			loadData() {
				axios.get("/category/parent").then(resp => {
					this.categoryParentList = resp.data;
				});
			},
			addCategory(){
				axios.post("/category",this.category).then(resp=>{
					location.href="./category-list.html";
				});
			},
		},
		components: {
			'top-manage': 'url:../common/top-manage.vue',
			'bottom': 'url:../common/bottom.vue',
			'product-manage': 'url:../common/product-manage.vue',
		},
	});
</script>
</body>
</html>